<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
    <el-form-item label="设备" prop="equipmentName">
        <el-select
          v-model="form.equipmentName"
          placeholder="请选择设备"
          clearable
          size="small"
        >
          <el-option
            v-for="item in equipmentOptions"
            :key="item.equipmentId"
            :label="item.equipmentName"
            :value="item.equipmentId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务名称" prop="workingName">
        <el-input
          v-model="queryParams.workingName"
          placeholder="请输入任务名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="增材方式" prop="technologyMaterialAddMethodId">
        <el-select
          v-model="technologyMaterialAddMethodIds"
          placeholder="请选择增材方式"
          clearable
          multiple
          size="small"
        >
          <el-option
                v-for="dict in materialAddMethodOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              >
               <span style="float: left">{{ dict.dictDataAbbreviation }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictLabel}}</span>
              </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          :loading="btnLoading"
          @click="handleExport"
          v-hasPermi="['technology:working:export']"
          >导出</el-button
        >
      </el-col>
    </el-row>

    <el-table
    :cell-style="{ padding: this.tablePadding }"
      border
      v-loading="loading"
      :data="workingList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务ID" align="center" prop="workingId" />
      <el-table-column label="任务名称" align="center" prop="workingName" />
      <el-table-column label="建立时间" align="center"  width="160" prop="createTime" />
       <el-table-column label="公司" align="center" prop="deptName" />
      <el-table-column label="设备名称" align="center" prop="equipmentName" />
      <el-table-column
        :show-overflow-tooltip="true"
        label="组织"
        align="center"
        prop="deptName"
      />
      <!-- <el-table-column label="加工任务ID" align="center" prop="workingplanId" /> -->
      <el-table-column
        label="增材方式"
        align="center"
        width="120"
        prop="technologyMaterialAddMethodName"
      />
   
    <el-table-column
        label="加工材料"
         width="120"
        align="center"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a" @click="getDetails(scope.row,1)">加工材料详情</div>
      </template>
    </el-table-column>
     <el-table-column
        label="工艺参数"
         width="120"
        align="center"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a" @click="getDetails(scope.row,1)">工艺参数详情</div>
      </template>
    </el-table-column>
    <el-table-column
        label="三维模型"
         width="120"
        align="center"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a">三维模型详情</div>
      </template>
    </el-table-column>
    <el-table-column
        label="工艺文件"
        align="center"
         width="120"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a">工艺文件详情</div>
      </template>
    </el-table-column>
    <el-table-column
        label="检测报告"
        align="center"
         width="120"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a">检测报告详情</div>
      </template>
    </el-table-column>
    <el-table-column
        label="产品图像"
         width="120"
        align="center"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a">产品图像详情</div>
      </template>
    </el-table-column>
     <el-table-column
        label="工艺预设"
        align="center"
         width="120"
        prop="technologyMaterialAddMethodName"
      >
      <template slot-scope="scope">
        <div class="table-a">工艺预设详情</div>
      </template>
    </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :close-on-click-modal="false" title="加工材料详情" :visible.sync="open" width="800px" append-to-body>
      <first ref="firstRef"/>
       <div slot="footer" class="dialog-footer">
        <el-button @click="open=false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="加工材料详情" :visible.sync="openMaterial" width="800px" append-to-body>
      <material-details-tab ref="firstRef"/>
       <div slot="footer" class="dialog-footer">
        <el-button @click="openMaterial=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listWorking,
} from "@/api/technology/working";
import {listDeptOptions,listInfo } from "@/api/equipment/info";
import MaterialDetailsTab from '../workingMaintain/components/MaterialDetailsTab.vue'
export default {
  name: "Working",
  components: {MaterialDetailsTab},
  data() {
    return {
      btnLoading:false,
    open:false,
      id:null,
      // 遮罩层
      loading: true,
      openMaterial:false,
      // 选中数组
      ids: [],
      workingNames:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工艺管理加工任务 表格数据
      workingList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workingCategoryId: null,
        workingName: null,
        equipmentId: null,
        deptId: null,
        status: null,
        technologyMaterialAddMethodId: null,
      },
      equipmentOptions: [],
      materialAddMethodOptions: [],
      deptOptions:[],
      technologyMaterialAddMethodIds: null,
      // 表单参数
      form: {}
    };
  },
  created() {
    this.getList();
    this.getEquipmentOptions();
    this.getMaterialAddMethodOptions();
  },
  methods: {
    getDetails(row,id){
      this.open=true
      this.$nextTick(()=>{
         this.$refs.firstRef.getInfo(id)
      })
     
    },
    // 获取设备下拉
    getEquipmentOptions() {
      listInfo({status:1}).then((response) => {
        this.equipmentOptions = response.rows;
        this.loading = false;
      });
    },
    /* 获取公司列表 */
    getDeptOptions() {
      listDeptOptions().then((response) => {
        this.deptOptions = response.data;
        this.loading = false;
      });
    },
    /** 查询工艺管理加工任务 列表 */
    getList() {
      this.loading = true;
      listWorking(this.queryParams).then((response) => {
        this.workingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  
    getMaterialAddMethodOptions() {
      // listMaterialAddMethod().then((response) => {
      //   this.materialAddMethodOptions = response.rows;
      //   this.loading = false;
      // });
      this.getDicts("base_material_addMethod").then((response) => {
         let list=response.data.filter(item=>{
           return item.status==1
         })
      this.materialAddMethodOptions =list;
    });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.workingId);
      this.workingNames = selection.map((item) => item.workingName);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.btnLoading=true
      this.download(
        "technology/working/export",
        {
          ...this.queryParams,
        },
        `technology_working.xlsx`,
        '',
        ()=>{
          this.btnLoading=false
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.table-a{
  color:#409EFF;
  cursor: pointer;
}
</style>